Footers 101: Design Patterns and When to Use Each 頁尾設計
什麼是頁尾？
頁尾是網頁底部的區域，位於頁面主體內容之下，來源於印刷設計中的一致設計元素概念。與印刷不同，網頁頁尾通常具備互動功能。
為什麼要重視頁尾？
雖然使用者花費在網頁頂部的時間更多，但頁尾依然具有重要作用：
使用者未找到所需內容時的“最後機會”：頁尾可提供補充資訊或其他服務來重新吸引使用者。
尋找特定資訊：使用者可能直接滾動至頁尾，查詢如聯絡方式、公司資訊或社交媒體連結等內容。
設計頁尾的價值：頁尾設計成本低，不會干擾主要內容，同時能為使用者提供額外幫助，是一種“無害但有益”的設計。
使用者如何使用頁尾 (People Use Footers)
作為查詢資訊的最後資源：使用者未在頁面主體內容找到所需內容時，頁尾提供另一種導航途徑。
例如：使用者對銀行賬戶註冊感興趣，但未找到相關服務，可以在頁尾發現其他選項如貸款或保險資訊。
直接尋找頁尾內容：使用者可能預期在頁尾找到公司資訊、聯絡方式或其他資源。這種情況下，頁尾的設計需要一致且易發現。
頁尾常見元件 (Footer Elements)
頁尾內容取決於網站目標和使用者需求，可包含以下元件：
1. 工具連結 (Utility Links)
提供公司地址、電話、隱私政策、使用條款等基本資訊。即使這些資訊在頁面頂部有展示，頁尾也需重複包含。
適用場景：所有網站
Clarity Money 頁尾僅包含隱私政策、使用條款和社交媒體連結。
J. Crew 頁尾提供客戶支援的 Twitter 連結、電話號碼和支援郵箱。
2. 門墊式導航 (Doormat Navigation)
頁尾包含與頂部導航相同的內容，適合頁面較長的網站。使用者無需滾動回頂部，即可快速訪問其他部分。
適用場景：長頁面，尤其是底部導航不可用時
示例：UnitedHealth Group 頁尾與頂部導航一致，方便使用者快速切換頁面。
3. 輔助任務連結 (Secondary Tasks)
連結到不在主導航中的次要任務，如：
- 招聘資訊
- 媒體工具包
- 產品說明檔案
- 投資者資訊
適用場景：針對不同使用者群的多用途網站
示例：Dwell Magazine 頁尾提供與雜誌內容無關的其他選項，如“關於我們”和“專業人士”。
4. 網站地圖式頁尾 (Site Map)
顯示全域性導航和其他重要頁面，幫助使用者瞭解網站內容並發現隱藏頁面。
適用場景：資訊層級深的網站
示例：CNN 頁尾結合頂層導航和下級分類連結，幫助使用者快速定位內容。
5. 使用者評論或獎項 (Testimonials or Awards)
透過展示獎項和使用者評價增加可信度，適用於需要增強品牌權威的新公司。
示例：Reykjavik Excursions 頁尾包含認可獎項，以提升公司形象。
6. 子品牌展示 (Brands Within the Organization)
適合擁有多個子品牌的大型企業，幫助使用者識別其他關聯品牌。
示例：Walmart 頁尾展示了旗下品牌，如 Hayneedle 和 Jet。
7. 使用者互動 (Customer Engagement)
包括郵件訂閱、社交媒體連結，甚至嵌入社交媒體動態內容。
適用場景：所有網站都可包含社交媒體連結；注重視覺效果的品牌可嵌入動態內容
示例：The Good Trade 頁尾包含郵件訂閱、Instagram 動態和社交媒體連結。
特殊頁尾形式 (Variations on Footers)
1. 無限滾動和迷你頁尾 (Infinite Scroll & the Mini Footer)
無限滾動頁面中，傳統頁尾消失，實用連結則出現在側欄或頂部導航中。
適用場景：動態載入內容的網站
示例：LinkedIn 使用右側欄迷你頁尾展示重要連結。
2. 上下文頁尾 (Contextual Footers)
根據頁面內容自定義頁尾，適合多使用者角色的網站。
適用場景：根據使用者角色提供不同功能的網站
示例：Medium 在故事頁面顯示基於使用者角色的頁尾，推薦會員權益或相關內容。
頁尾設計常見問題及解決方案 (Common Footer Pitfalls & Solutions)
資訊層級過多
問題： 包含過多層級的資訊會讓頁尾難以使用。
解決方案： 限制為1-2級，優先展示最重要的內容。
連結名稱不明確
問題： 使用“資源”或“幫助”這樣的模糊術語。
解決方案： 使用明確的術語，如“聯絡我們”或“客戶支援”。
資訊結構混亂
問題： 缺乏資訊層級，使用者難以快速瀏覽。
解決方案： 使用分組或層級結構清晰呈現內容。
隱藏或難以閱讀的頁尾
問題： 使用過小字型或摺疊頁尾，影響可用性。
解決方案： 保證字型大小、顏色清晰，避免摺疊頁尾。
